<template>
	<view class="page">
		<up-navbar title="代理商管理" :autoBack="true" safeAreaInsetTop placeholder> </up-navbar>
		<view style="background-color: #fff;    height: 100rpx; ">
			<view style="width: 95%; margin: 0 auto;">
				<view class=" ">
					<view class="search-form round" @click="symtz">
						<image class="" src="/static/Frame@3x.png" alt=""
							style="width:35rpx;height:35rpx; margin-left: 20rpx;" />
						<input style="width: 73%;" v-model="search" :adjust-position="false" type="text"
							placeholder="请输入代理商名称" confirm-type="search">
						<view class="action" @click="fenhong">
							<button class="sjign">搜索</button>
						</view> </input>
					</view>

				</view>






			</view>
		</view>




		<view class="yanshi"  :style="{ backgroundImage: 'url(' + jing + ')' }"  v-for="(item, index) in list" :key="index" @click="xinagqing(item.id)">
			<view class="dailis"  >
				<view class="juzongs" >
					<view>
						<up-icon name="account-fill"></up-icon>						
					</view>
					<view style="margin: 10rpx;">
						<text>{{item.user_type_name}}</text>
					</view>
					<view style="margin: 10rpx;">
						<view>{{item.nickname}}</view>
					</view>
					
					
				</view>
				
				<view class="juzongs"  style="margin-top: 20rpx;">
					<view class="yangshis">
						<view>
							<text style="font-size: 39rpx;">{{item.sale_num}}人</text>	
						</view>	
						<view>
							<text>销售人员</text>	
						</view>	
						
					</view>
					<view class="yangshis" >
						<view>
							<text style="font-size: 39rpx;">{{item.order_num}}个</text>
						</view>
						<view>
							<text>订单数量</text>
						</view>
					</view>
					<view class="yangshis" style="width: 30%;">
						<view>
							
							<text style="font-size: 39rpx;">¥{{item.order_money}}</text>
						
						</view>
						<view>
							<text>交易总金额</text>
						</view>
					</view>
					<view class="yangshis" style="width: 20%;">
						<view>
							
							<text style="font-size: 39rpx;">¥{{item.agent_money}}</text>
						
						</view>
						<view>
							<text>分红</text>
						</view>
					</view>
					
					
				</view>
			
				
			</view>
		</view>
<!-- position: fixed; bottom: 30rpx; width: 90%; left: 5%; -->
<view style="  ">
	<view style="width: 90%; margin: 0 auto;  margin-top: 50rpx; margin-bottom: 20rpx; ">
		<view><up-button class="custom-style" shape="circle" color="#FF6A04" text="添加代理商" @click="baocun"></up-button></view>
	
	</view>
	
</view>



	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data() {
			return {
				jing:request+'/tupan/dailishang.png',
				page: 1,
				limit: 6,
				search:'',
				list:[],

			}
		},
		onShow() {
			this.page=1
			this.fenhong()
		},
		methods: {
			fenhong(){
					var insg = uni.getStorageSync('userinfo')
					
					console.log(insg,'1111')
					this.$request({
						url: '/api/User/getMyAgentLists',
						header:"application/x-www-form-urlencoded",
						data: {							
							type:insg.user_type,
							page: this.page,
							limit: this.limit,
							agent_name:this.search
						}
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							this.list=res.data
							
						} else {
							
						
						}
					})
				
			},
			
			
			onReachBottom() {
				console.log(111)
				var insg = uni.getStorageSync('userinfo')
				var that = this
				uni.showLoading({
					title: '加载中...',
					mask: true //遮蔽层
				})
				console.log(1231123);
				that.page += 1;				
				this.$request({
					url: '/api/User/getMyAgentLists',
					header: "application/x-www-form-urlencoded",
					data: {
						type: insg.user_type,
						page: that.page,
						limit: that.limit,
						agent_name:this.search
					}
				}).then(res => {
					if (res.code == 1) {
						var feilei_neirong = res.data;
						console.log(res)
						if (feilei_neirong.length != 0) {
			
							feilei_neirong.forEach(rect => {
			
								that.list.push(rect);
							});
							console.log(that.list = that.list)
			
						
							uni.hideLoading()
						} else {
							uni.showToast({
								title: '没有更多的数据了',
								icon: 'none',
								duration: 2000
							});
						}
						// res.data.forEach((item, index) => {
						// 	item.avatars=request+item.avatar
						// });	
						// this.list=res.data
					} else {
			
			
					}
				})
			},
			baocun(){	
				var data={
						id:null
					}
				var jisng =	encodeURIComponent(JSON.stringify(data))
				uni.navigateTo({
				       
						  url: '/pages/my/daili_shang/add_daili_s/add_daili_s?options='+jisng
						  // url: '/pages/my/daili_shang/add_daili_s/add_daili_s'
				      });
				
			},
			xinagqing(id){
				uni.navigateTo({
				       
						 url: '/pages/my/daili_shang/daili_xiangq/daili_xiangq?id='+id,
				      });
			}
			
		},
		onReachBottom() {
			this.onReachBottom()
		}
	}
</script>

<style lang="scss" scoped>
	.yangshis{
		margin: 10rpx;
		text-align: center;
		line-height: 60rpx;
		width: 25%;
	}
	.dailis{
		width: 95%; margin: 0 auto; padding: 20rpx; 
		// background-size: cover;
		//  background-position: center;
		//  background-repeat: no-repeat;
		//  padding-top: 20rpx;
	}
	.sjign {

		position: relative;
		border: 0rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		height: 50rpx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		-webkit-transform: translate(0rpx, 0rpx);
		transform: translate(0rpx, 0rpx);
		margin-right: initial;
		background-image: linear-gradient(to bottom, #FF9839, #FF7139);
		color: #333333;
		border-radius: 65rpx;
		height: 64rpx;
		color: #fff;


	}

	button::after {
		border: none;
	}

	.search-form {
		background-color: #f5f5f5;
		line-height: 32px;
		height: 64rpx;
		font-size: 24rpx;
		color: #333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		border-radius: 60rpx;
	}

	.page {
		background: #F8F8F8;
	}
.yanshi:last-child {
  // border-bottom: 1px solid #ccc; /* 添加下边框 */
  margin-bottom: 150rpx;
  padding-bottom: 150rpx;
}
	.yanshi {
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		    background-size: cover;
		    background-position: center;
		    background-repeat: no-repeat;
		
	}
.juzongs{
	width: 100%; display: flex;/*justify-content: center;*/ align-items: center;
	
}
	
	
</style>